<template>
  <div id="app">
    <div class="layout">
      <Header />
      <div class="container">
        <div class="item">
          <div class="item-name">
            <div class="item-name-left"><b>重点车辆列表</b></div>
            <div class="item-name-right">
              <el-button
                type="primary"
                link
                :icon="Plus"
                @click="handleAdd"
                >添加</el-button
              >
              <el-button
                type="primary"
                link
                :icon="Search"
                @click="searchDialogRef.visible = true"
                >搜索</el-button
              >
            </div>
          </div>
          <TableInfo />
        </div>
      </div>
    </div>

    <AddDialog ref="mapStore.addDialogVisible" />
    <SearchDialog ref="searchDialogRef" />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { Plus, Search } from "@element-plus/icons-vue";
import Header from "@/components/Header.vue";
import TableInfo from "@/components/TableInfo.vue";
import AddDialog from "@/components/AddDialog.vue";
import SearchDialog from "@/components/SearchDialog.vue";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const searchDialogRef = ref(null);

const handleAdd = () => {
  mapStore.openType = 'add';
  mapStore.ruleAddForm.name = "";
  mapStore.ruleAddForm.IDNumber = "";
  mapStore.ruleAddForm.sex = "";
  mapStore.ruleAddForm.licensePlateNumber = "";
  mapStore.ruleAddForm.phone = "";
  mapStore.ruleAddForm.address = "";
  mapStore.addDialogVisible = true
}
onMounted(() => {

});

onBeforeUnmount(() => {

});
</script>

<style scoped>
@import url("@/assets/main.css");

#app {
  width: 100%;
  height: 100%;
  font-weight: normal;
  background: #0c5eaa url("@/assets/images/bg9.jpg") no-repeat scroll center 0;
  background-size: cover;
}

.layout {
  height: 100% !important;
  width: 100% !important;
}

.container {
  display: flex;
  padding: 10px;
  height: calc(100vh - 121px);
  /* background: rgba(234, 242, 246, 1); */
}

.item-name {
  height: 30px;
  line-height: 25px;
  padding-left: 15px;
  display: flex;
  justify-content: space-between;
  background: url("@/assets/images/titbg.png") no-repeat scroll left center;
  background-size: cover;
}

.item-name-left b{
  font-size: 18px;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 1px #000;
}

.item-name-right {
  font-size: 14px;
}

.item {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  overflow: auto;
  /* background: rgba(255, 255, 255, 1); */
}

.el-button--primary{
  --el-button-bg-color: rgba(0, 155, 223, 1)!important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}
</style>
